@import './variable.scss';

.camara-box {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  background-color: #000;
  border: px(1) solid #13ce66;
  width: calc(40vw + #{px(152)});
  height: calc(22.5vw + #{px(32)});

  &.is-minimality{
    width: px(126);
    height: px(32);
  }

  &.isSmall{
    z-index: 3000;
    width: calc(22vw + #{px(152)});
    height: calc(14.5vw + #{px(32)});
  }

  ::v-deep .camara-box-control{
    width: 100%;
    height: px(30);
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #fff;
    .svg-icon{
      width: px(20);
      height: px(20);
      margin: 0 px(10);
      cursor: pointer;
    }
  }

  ::v-deep .camara-box-body{
    width: 100%;
    height: calc(100% - #{px(30)});
    display: flex;
    flex-wrap: nowrap;
  }
  
  ::v-deep .camara-play-list{
    height: 100% !important;
    flex: 1;
    display: grid;
    background-color: #000;

    &.list-total_1{
      grid-template-columns: 100%;
      grid-template-rows: 100%;
    }
    
    &.list-total_4{
      grid-template-columns: repeat(2, 50%);
      grid-template-rows: repeat(2, 50%);
    }
    &.list-total_9{
      grid-template-columns: repeat(3, 33.333333%);
      grid-template-rows: repeat(3, 33.333333%);
    }
    &.list-total_16{
      grid-template-columns: repeat(4, 25%);
      grid-template-rows: repeat(4, 25%);
    }
  }

  ::v-deep .camara-box-item{
    position: relative;
    &.is-active{
      border: 1px solid #0099ff !important;
    }

    &.total_1{
      border: 1px solid #fff;
    }
    &.total_4{
      border-right: 1px solid #fff;
      border-bottom: 1px solid #fff;
      &:nth-child(odd) {
        border-left: 1px solid #fff;
      }
      &:nth-child(1),&:nth-child(2) {
        border-top: 1px solid #fff;
      }
    }
    &.total_9{
      border-right: 1px solid #fff;
      border-bottom: 1px solid #fff;
      &:nth-child(3n + 1) {
        border-left: 1px solid #fff;
      }
      &:nth-child(1),&:nth-child(2),&:nth-child(3) {
        border-top: 1px solid #fff;
      }
    }
    &.total_16{
      border-right: 1px solid #fff;
      border-bottom: 1px solid #fff;
      &:nth-child(4n + 1) {
        border-left: 1px solid #fff;
      }
      &:nth-child(1),&:nth-child(2),&:nth-child(3),&:nth-child(4) {
        border-top: 1px solid #fff;
      }
    }
    
    .video-play-box-close{
      position: absolute;
      top: 0;
      right: px(5);
      z-index: 3001;
      color: #fff;
      cursor: pointer;
      font-size: px(14);
    }
  }

  .el-loading-mask{
    z-index: 201;
  }

  ::v-deep .camara-list{
    width: px(150);
    min-width: px(150);
    height: 100%;
    // background: #000;
    color: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    
    .list-tree{
      height: 100%;
      width: 100%;
      // background-color: #666666;
      background: rgba(170, 163, 163, 0.2);
      color: #fff;
      .is-leaf{
        display: none;
      }
      .el-tree-node__content{
        padding-left: px(6) !important;
        height: px(26);
        &:hover{
          background-color: #2993d9;
        }
        .el-checkbox{
          font-size: px(16);
          margin-right: px(8);
          .el-checkbox__inner{
            width: px(14);
            height: px(14);
            &::after{
              height: px(7);
              left: px(4);
              width: px(3);
              top: px(1);
            }
          }
        }
        .el-tree-node__label{
          font-size: px(16);
        }
      }
    }
    .list-tree.el-tree--highlight-current {
      .is-current{
        .el-tree-node__content{
          background-color: #326181;
        }
      }
    }
    .custom-tree-node{
      font-size: px(18);
    }
  }

  

  ::-webkit-scrollbar{
    display: none;
  }

  
}